<template>
  <div class="zx-time-range" v-show="show">
    <div class="zx-time">
      <div class="zx-time-header">
        <div class="zx-time-left" @click="closeThis">取消</div>
        <div class="zx-time-title">选择时间范围</div>
        <div class="zx-time-right" @click="timeOK">确定</div>
      </div>
      <div class="dp-range">
        <div class="dp-nbsp">&nbsp;</div>
        <div class="dp-zx-time" :class="{cur: nowIndex===0}" @click="changeTime(0)">{{ startTime }}</div>
        <div class="dp-zx-text">至</div>
        <div class="dp-zx-time" :class="{cur: nowIndex===1}" @click="changeTime(1)">{{ endTime }}</div>
        <div class="dp-nbsp">&nbsp;</div>
      </div>
      <div class="zx-time-date" style="height:5.16rem">
        <datetime-view v-model="timeVal" ref="datetime" format="YYYY-MM-DD"></datetime-view>
      </div>
    </div>
    <div class="zx-dialog-mask" ></div>
  </div>
</template>

<script>
import { DatetimeView } from 'vux'

export default {
  components: {
    DatetimeView
  },
  name: 'timeRange',
  model: {
    prop: 'show',
    event: 'change'
  },
  props: {
    show: {
      type: Boolean,
      default: false
    },
    timeDate: {
      type: Array,
      default () {
        return []
      }
    }
  },
  data () {
    return {
      timeVal: '',
      startTime: '',
      endTime: '',
      nowIndex: 0
    }
  },
  methods: {
    createTime () {
      // debugger
      if (this.timeDate.length === 0) {
        this.startTime = this.$publicFun.timeFormat('yyyy-MM-dd', new Date())
        this.endTime = this.$publicFun.timeHandle(this.startTime, 1)
      } else if (this.timeDate.length === 1) {
        this.startTime = this.timeDate[0]
        this.endTime = this.$publicFun.timeHandle(this.startTime, 1)
      } else if (this.timeDate.length === 2) {
        this.startTime = this.timeDate[0]
        this.endTime = this.timeDate[1]
      }
    },
    changeTime (val) {
      // console.log(this.timeVal)
      this.nowIndex = val
      if (this.nowIndex === 0) {
        this.timeVal = this.startTime
      } else {
        this.timeVal = this.endTime
      }
      this.$refs.datetime.render()
    },
    closeThis () {
      this.$emit('update:show', false)
      this.$emit('change', false)
    },
    timeOK () {
      this.$emit('on-click', [this.startTime, this.endTime])
      this.$emit('update:show', false)
      this.$emit('change', false)
    }
  },
  mounted: function () {
    this.createTime()
  },
  watch: {
    'show': function (val) {
      this.$emit('update:show', val)
      this.$emit('change', val)
    },
    'timeVal': function (val) {
      if (this.nowIndex === 0) {
        this.startTime = val
      } else {
        this.endTime = val
      }
    }
  }
}
</script>
<style lang="less">
.zx-time-range { width: 100%; height: 100%; position: fixed; left: 0; top: 0; z-index: 30000;}
.zx-dialog-box { position:absolute; left: 0; top: 50vh; transform: translateY(-50%); padding: 0 5vw; width: 100%;}
.zx-time { position:absolute; bottom: 0; left: 0; width: 100%;}
.zx-time-header { display: flex; background: #fff; border-radius: 0.3rem 0.3rem 0 0; height: 0.9rem; padding: 0 0.3rem;}
.zx-time-header .zx-time-title { flex: 1; text-align: center; font-size: 0.3rem; line-height: 0.9rem;}
.zx-time-header .zx-time-left,.zx-time-header .zx-time-right { line-height: 0.9rem; font-size: 0.28rem; }
.dp-range { font-size: 0.28rem; padding: 0.5rem 0; display: flex; background: #fff; box-sizing: border-box;}
.dp-range .dp-nbsp { flex: 1;}
.dp-range .dp-zx-time { border-bottom: 1px solid #e6e6e6; height: 0.48rem;}
.dp-range .dp-zx-time.cur { color:#33f; border-color: #33f;}
.dp-range .dp-zx-text { padding: 0 0.6rem; height: 0.48rem;}
.zx-time-date { background: #fff;}
</style>
